import {
  IHttpValidationProblemDetails,
  IProblemDetails,
} from "@src/services/v1_client";
import { createMemo, Index } from "solid-js";

interface HttpValidationProblemDetailsErrorsViewProps {
  errors?: { [key: string]: string[] };
}

export const HttpValidationProblemDetailsErrorsView = (
  props: HttpValidationProblemDetailsErrorsViewProps
) => {
  const formatted = createMemo(() => {
    return Object.entries(props.errors ?? {});
  });

  return (
    <ul style={{ "text-align": "left" }}>
      <Index each={formatted()}>
        {(item, index) => (
          <Index each={item()[1]}>{(error, _) => <li>{error()}</li>}</Index>
        )}
      </Index>
    </ul>
  );
};
